<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowd/my-tag.js"></script>
	<%@include file="/WEB-INF/modal-tag-add.jsp" %>
	<%@include file="/WEB-INF/modal-tag-edit.jsp" %> 
	<%@include file="/WEB-INF/modal-tag-confirm.jsp" %>
 
<script type="text/javascript">

	$(function(){
		
		//调用生成菜单树
		generateTree();
		//打开添加模态框
	 	$("#treeDemo").on("click",".addBtn",function(){
			$("#tagAddModal").modal("show");
			//将父节点id设置为全局参数
			window.pid = this.id;
			
			return false;
		});
	 	
		//添加节点
		$("#tagSaveBtn").click(function(){
			var pid = window.pid;
			var name = $.trim($("#tagAddModal [name=name]").val());
			
			$.ajax({
				"url":"project/tag/save.json",
				"type":"post",
				"data":{
					"pid":pid,
					"name":name,
				},
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("添加成功！");

						//调用生成菜单树
						generateTree();
					}
					if(result=="FAILED"){
						layer.msg(response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			//关闭模态框
			$("#tagAddModal").modal("hide");
			
			//清空表单内容
			// jQuery对象调用click()函数，里面不传任何参数，相当于用户点击了一下
			$("#tagResetBtn").click();
		});
		
		
		// 给编辑按钮绑定单击响应函数
		$("#treeDemo").on("click",".editBtn",function(){
			
			// 将当前节点的id保存到全局变量
			window.id = this.id;
			
			// 打开模态框
			$("#tagEditModal").modal("show");
		
			// 获取zTreeObj对象
			var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
			
			// 根据id属性查询节点对象
			// 用来搜索节点的属性名
			var key = "id";
			
			// 用来搜索节点的属性值
			var value = window.id;
			
			var currentNode = zTreeObj.getNodeByParam(key, value);
			//alert(currentNode);
			// 回显表单数据
			$("#tagEditModal [name='name']").val(currentNode.name);
			
			return false;
		});
		
		// 给更新模态框中的更新按钮绑定单击响应函数
		$("#tagEditBtn").click(function(){
			
			// 收集表单数据
			var name = $("#tagEditModal [name='name']").val();
			
			// 发送Ajax请求
			$.ajax({
				"url":"project/tag/update.json",
				"type":"post",
				"data":{
					"id": window.id,
					"name":name,
				},
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					
					if(result == "SUCCESS") {
						layer.msg("操作成功！");
						
						// 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
						// 否则有可能刷新不到最新的数据，因为这里是异步的
						generateTree();
					}
					
					if(result == "FAILED") {
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			
			// 关闭模态框
			$("#tagEditModal").modal("hide");
			
		});
		
		
		//打开删除模态框
		$("#treeDemo").on("click",".removeBtn",function(){
			//将当前id设置为全局参数
			window.id = this.id;
			$("#tagConfirmModal").modal("show");
			//准备确认删除的内容
			//获取在TreeObj对象
			var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
			//根据id属性获取节点对象，借此来获取属性值
			var key = "id";
			var value = window.id;
			var currentNode = zTreeObj.getNodeByParam(key,value);
			$("#removeNodeSpan").html("【"+currentNode.name+"】");
			return false;
		});
		
		//删除节点
		$("#confirmBtn").click(function(){
			var id = window.id;
			$.ajax({
				"url":"project/tag/remove.json",
				"type":"post",
				"data":{
					"id":id,
				},
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("删除成功！");

						//调用生成菜单树
						generateTree();
					}
					if(result=="FAILED"){
						layer.msg(response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			//关闭模态框
			$("#tagConfirmModal").modal("hide");
		});
 	});

</script>
<body>

	<%@ include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<div class="panel panel-default">
					<div class="panel-heading">
						<i class="glyphicon glyphicon-th-list"></i> 项目标签菜单列表
						<div style="float: right; cursor: pointer;" data-toggle="modal"
							data-target="#myModal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</div>
					</div>
					<div class="panel-body">
						<!-- 这个ul标签是zTree动态生成的节点所依附的静态节点 -->
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
</body>
</html>